<template>
  <div id="app">
    <!--搜索-->
    <el-row>
        <el-col :span="6"><el-input v-model="ename" size="mini" placeholder="请输入字典标签"></el-input></el-col>
<!--        <el-col :span="6"><el-input v-model="loc"  size="mini" placeholder="请输入"></el-input></el-col>-->
        <!-- <el-col :span="6">
            <el-select v-model="dept" size="mini" clearable placeholder="请选择所在部门" @change="$forceUpdate()">
                <el-option
                v-for="item in depts"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
                :disabled="item.status=='1'?true:false">
                </el-option>
            </el-select>
        </el-col> -->
        <el-col :span="6"><el-button type="primary" @click="search"  size="mini" icon="el-icon-search">搜索</el-button>
            &nbsp;<el-button type="primary"  size="mini" icon="el-icon-circle-plus" @click="handleAdd">添加</el-button></el-col>
        
    </el-row>
    <!--分页列表显示-->
    <el-row>
        <el-table
                v-loading="loading2"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                :data="tableData"
                height="564"
                style="width: 100%;"
                >
            <el-table-column
                    prop="dictCode"
                    label="编码"
                    width="50">
            </el-table-column>
             <el-table-column
                    prop="dictSort"
                    label="字典排序">
            </el-table-column>
            <el-table-column
                    prop="dictLabel"
                    label="字典标签">
            </el-table-column>
            <el-table-column
                    prop="dictValue"
                    label="字典键值">
            </el-table-column>
            <el-table-column
                    prop="dictType"
                    label="字典类型">
            </el-table-column>
            <el-table-column
                    prop="cssClass"
                    label="样式属性">
            </el-table-column>
            <el-table-column
                    prop="listClass"
                    label="表格回显样式">
            </el-table-column>
            <el-table-column label="是否默认">
                <template slot-scope="scope">
                    {{ scope.row.isDefault == 'Y' ? '是':'否'}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                         @change='changeStatus($event,scope.row.status,scope.row.dictCode)'
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="0"
                        inactive-value="1"
                        >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createBy"
                    label="创建者">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    prop="updateBy"
                    label="更新者">
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="更新时间">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注">
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <!--分页插件-->
    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-row><br>
    <!--添加和更新 弹框-->
    <el-row>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form" status-icon label-width="100px" class="demo-ruleForm">
                <el-form-item label="字典编码" :label-width="formLabelWidth" v-if="isShow">
                    <el-input v-model="form.dictCode" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="字典排序" :label-width="formLabelWidth">
                    <el-input v-model="form.dictSort" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="字典标签" :label-width="formLabelWidth">
                    <el-input v-model="form.dictLabel" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="字典键值" :label-width="formLabelWidth">
                    <el-input v-model="form.dictValue" auto-complete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="字典类型" :label-width="formLabelWidth">
                    <el-input v-model="form.dictType" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="样式属性" :label-width="formLabelWidth">
                    <el-input v-model="form.cssClass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="表格回显样式" :label-width="formLabelWidth">
                    <el-input v-model="form.listClass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否默认" :label-width="formLabelWidth">
                    <el-radio v-model="form.isDefault" label="Y">是</el-radio>
                    <el-radio v-model="form.isDefault" label="N">否</el-radio>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch
                        v-model="form.status"
                         @change='changeStatus($event,form.status,form.dictCode)'
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="0"
                        inactive-value="1"
                        >
                    </el-switch>
                </el-form-item>
                <el-form-item label="创建者" :label-width="formLabelWidth" v-if="isShow">
                    <el-input v-model="form.createBy" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" :label-width="formLabelWidth" v-if="isShow">
                    <el-input v-model="form.createTime" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="更新者" :label-width="formLabelWidth" v-if="isShow">
                    <el-input v-model="form.updateBy" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="更新时间" :label-width="formLabelWidth" v-if="isShow">
                    <el-input v-model="form.updateTime" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="form.remark" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdate">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>
  </div>
</template>
<script>
export default {
    data() {
        return{
            tableData:[],
            currentPage:1,//当前页面，默认1
            pageSize:2,//每页显示条数
            total:100,//分页总数量，默认值随便写，初始化时赋予新值
            ename:'',//查询功能
            dialogFormVisible:false,
            dialogFormVisibleRoles:false,
            title:'字典数据添加',
            form:{},
            loading2:"true",  //加载提示
            isShow:true,
            formLabelWidth:''
        }
    },
     created:function(){
            this.loading2 = "true";
            //初始化
            this.loadData();
     },
     methods: {
         //部门状态开关改变
        changeStatus($event,num,dictCode){
                console.log(dictCode);
                console.log($event);
                console.log(num);
                //定义一个json数据
                var jsons={  
                    dictCode:dictCode,
                    status:num
                }
                var _this = this;
                
                this.$http({
                    url:'/api/cs/dictData/update',
                    method:'post',
                    data:jsons,
                    header:{
                        'Content-Type':'application/json'  //如果写成contentType会报错
                    }
                })
                    .then(function (response) {
                        console.log("=========");
                        console.log(response);
                        if(response.data.code==2000){
                            console.log("数据字典状态改变成功");
                        }else{
                            console.log("数据字典状态改变失败");
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                        console.log("==========");
                    });
                },
         //加载员工数据
            loadData(){
                this.$http.post("/api/cs/dictData/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{
                                            dictLabel:this.ename
                                            // deptId:this.dept
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.tableData = response.data.data.list;
                                                  this.total = response.data.data.total;
                                                  this.loading2 = "";
                                              }else{
                                                  //失败处理
                                                  console.log(error);
                                              }
                                })
            },
            //各种绑定事件方法
            //每页数量发生变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.loadData();
                /* axios.get('/dept/page',{
                     params: {
                         pageNo: this.currentPage,
                         pageSize: this.pageSize
                     }
                 })
                     .then(function (response) {
                         //正确请求时，回调函数
                         console.log(response);
                         if(response.data.code==2000){
                             _this.tableData = response.data.data.pageDept;
                             _this.total = response.data.data.total;
                         }
                     })
                     .catch(function (error) {
                         //失败处理
                         console.log(error);
                     });*/
            },
            //当前页发生变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.loadData();
                /*axios.get('/dept/page',{
                    params: {
                        pageNo: this.currentPage,
                        pageSize:this.pageSize
                    }
                })
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log(response);
                        if(response.data.code==2000){
                            _this.tableData = response.data.data.pageDept;
                            _this.total = response.data.data.total;
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                    });*/
            },
            //查询方法
            search(){
                this.loadData();
            },
            //处理添加
            handleAdd(){
                //隐藏添加不需要的
                this.isShow=false;
                //清空原来form
                this.form={isDefault:"Y"};
                //更新显示名称
                this.title="字典数据添加";
                //对话框显示
                this.dialogFormVisible=true;
            },
            //处理编辑（弹出部门更新对话框）
            handleEdit(index, row) {
                console.log(index, row);
                //显示编辑需要的
                this.isShow=true;
                this.form=row;
                //更新显示名称
                this.title="字典数据更新";
                //对话框显示
                this.dialogFormVisible=true;
            },

            //提交表单数据（添加或者更新）
            addOrUpdate(){
                var  url ='/api/cs/dictData/update';
                if(this.form.dictCode==''||this.form.dictCode==null){
                    url="/api/cs/dictData/insert";
                }
                var _this=this;
                //提交方法
                this.$http.post(url, this.form)
                    .then(function (response) {
                        console.log(response);
                        //提交成功
                        if(response.data.code==2000){
                            //关闭弹出框
                            _this.dialogFormVisible=false;
                            //提示更新成功
                            _this.$message({
                                //  message: '恭喜你，这是一条成功消息',
                                message: response.data.message,
                                type: 'success'
                            });
                            //重新加载数据
                            _this.loadData();
                        }else {
                            _this.$message.error(response.data.message);
                        }
                    })
                    .catch(function (error) {
                        _this.$message.error('错了哦，这是一条错误消息');
                    });
            },
            //处理删除（ 部门删除）
            handleDelete(index, row) {
                console.log(index, row);
                var _this=this;
                //确认弹框
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //执行删除
                   this.$http.delete('/api/cs/dictData/deleteById?dictCode='+row.dictCode)
                        .then(function (response) {
                            //判断删除是否成功
                            if(response.data.code==2000){
                                //提示
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                //重新加载数据
                                _this.loadData();
                            }else {
                                _this.$message.error(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            //失败处理
                            console.log(error);
                            _this.$message.error('删除失败!');
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            }
    
     }
}
</script>
<style>

</style>